<template>
<h1>el-开关组件</h1>
  <el-switch v-model="value1"/>
  <el-switch v-model="value2" class="ml-2" style="--el-switch-on-color: #f00"/>
  <hr>
  是否为管理员<el-switch v-model="isAdmin"></el-switch>
  <hr>
  是否显示图片<el-switch v-model="isShow"></el-switch>
  <img src="fcq.jpg" alt="" style="width: 50px;" v-show="isShow">
  <hr>
  <el-switch v-model="num":active-value="1":inactive-value="0"></el-switch>
  <el-switch v-model="numStr":active-value="1":inactive-value="0"></el-switch>
  <hr>
</template>

<script setup>
import {ref} from "vue";

const num = ref(1);
const numStr = ref('1');
const value1 = ref('false');
const value2 = ref('true');
const isAdmin = ref('false');

const isShow = ref('false');
</script>

<style scoped>

</style>